<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始设置 - 管理员账户</title>
    <!-- Material Design fonts -->
    <!--<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">-->
    <!-- Admin LTE-->
    <link rel="stylesheet" href="/static/css/AdminLTE.min.css">
    <!--jquery-->
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/static/css/ionicons.min.css">
    <!-- Bootstrap Material Design -->
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap-material-design.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/ripples.min.css">
    <link rel="stylesheet" href="/static/css/skins/skin-blue.min.css">

    <script src="/static/js/material.min.js"></script>
    <script src="/static/js/ripples.min.js"></script>
    <script src="/static/js/vue.min.js"></script>

    <script>
        var AdminLTEOptions = {
            //Enable sidebar expand on hover effect for sidebar mini
            //This option is forced to true if both the fixed layout and sidebar mini
            //are used together
            sidebarExpandOnHover: true,
            //BoxRefresh Plugin
            enableBoxRefresh: true,
            //Bootstrap.js tooltip
            enableBSToppltip: true
        };

        $.material.init();

        var error_msg = {
            "hasi_username" : false,
            "empty_username" : false,
            "email_error": false,
            "email_empty": false,
            "password_error": false,
            "repeat_error": false,
            "agree" : true
        };

        $(document).ready(function () {
            var vm = new Vue({
                el:"#register-form",
                data: error_msg,
                computed:{
                    "hasi_username" : function () {
                        var excited_words = ["excited","+1s","plus+1s","蛤","naive","too young","too simple","hawaii guitar","engineering drawing"];
                        for(var i=0;i<excited_words.length;i++){
                            if(this.username == excited_words[i]){
                                return true;
                            }
                        }
                        return false;
                    },
                    "password_error": function () {
                        var len = this.password.length;
                        if(len > 0 && (len < 6 || len > 30)){
                            return true;
                        }else{
                            return false;
                        }
                    },
                    "repeat_error": function () {
                        if(this.repeat_password.length > 0 && this.repeat_password !== this.password){
                            return true;
                        }else{
                            return false;
                        }
                    },
                    "agree":function () {
                        if(
                                ! this.repeat_error &&
                                ! this.hasi_username &&
                                ! this.password_error
                        ){
                            // email and username condition
                            var re_email = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
                            if(this.username.length > 0 &&
                                    re_email.test(this.email) &&
                                    this.password.length > 0 && // password not null
                                    this.password === this.repeat_password
                            ){
                                return true;
                            }else{
                                return false;
                            }
                        }else{
                            return false;
                        }
                    }
                }
            })
        });
    </script>

    <style>
        #reg-box-msg{
            padding-bottom:0;
        }

        div.form-group{
            margin-top: 1em !important;
        }

        div.error-msg{
            padding: 8px 15px;
            margin-bottom:0;
        }

        div.login-box{
            width: 400px;
        }

        [v-clock]{
            display: none;
        }
    </style>
</head>

<body class="hold-transition login-page">
<div class="login-box">
  <div class="login-logo">
    <b>Obsidian</b> Panel
  </div>
  <!-- /.login-logo -->
  <div class="login-box-body">
    <p class="login-box-msg" id="reg-box-msg">
        欢迎使用Obsidian Panel! <br>
        请先注册管理员账号以开始使用。
    </p>
      <hr>

    <form action="/startup/?step=2" method="post" id="register-form">
        <div class="form-group has-feedback">
            <input type="text" class="form-control" placeholder="用户名" v-model="username" name="username">
            <span class="fa fa-user form-control-feedback"></span>
            <!--<span class="help-block">Hello World</span>-->
            <div class="error-msg alert alert-danger fade in" v-if="empty_username" v-cloak>用户名不能为空！</div>
            <div class="error-msg alert alert-danger fade in" v-if="hasi_username" v-cloak>思维江化，亦可赛艇Θ..Θ</div>
        </div>

      <div class="form-group has-feedback">
          <input type="email" class="form-control" placeholder="E-mail" v-model="email" name="email">
          <span class="fa fa-envelope form-control-feedback"></span>
          <div class="error-msg alert alert-danger fade in" v-if="email_empty" v-cloak>E-mail 不能为空！</div>
          <div class="error-msg alert alert-danger fade in" v-if="email_error" v-cloak>E-mail 不合规范！</div>
      </div>

      <div class="form-group has-feedback">
          <input id="pa" type="password" class="form-control" placeholder="密码" v-model="password" name="password">
          <span class="fa fa-lock form-control-feedback"></span>
          <div class="error-msg alert alert-danger fade in" v-if="password_error">密码长度在6-30位之间！</div>
      </div>

      <div class="form-group has-feedback">
          <input id="pa" type="password" class="form-control" placeholder="重复密码" v-model="repeat_password">
          <span class="fa fa-lock form-control-feedback"></span>
          <div class="error-msg alert alert-danger fade in" v-if="repeat_error" v-cloak>前后密码不一致！</div>
      </div>

        <div class="row">
            <div class="col-xs-12" style="font-size: 13px;">
                <!--<p><span class="fa fa-circle-o"></span>点击「下一步」即代表你已知悉并同意我们的「基本法」。--></p>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-4">
            </div>
            <!-- /.col -->
            <div class="col-xs-8" style="text-align:right;">
                <!-- fake button-->
                <button type="submit" class="btn btn-raised btn-info" :disabled="!agree" disabled>下一步</button>
            </div>
            <!-- /.col -->
        </div>
    </form>

  </div>
  <!-- /.login-box-body -->
</div>
<!-- /.login-box -->
</body>

</html>
